<span style="font-weight: bold; font-size: 16px;">* 源起:</span>
由於推出了 <a href="http://racklin.blogspot.com/2007/01/blogger-jquery-way.html" style="font-size: 16px; color: red; font-weight: bold;">輕鬆擴充 Blogger 功能: Blogger_ext2.js</a> 後，阿土伯的一堆在樂多誌(Roodo)朋友紛紛來信關心，在頻頻要求下，將 blogger_ext2 porting 到 Roodo 上，算是給樂多誌朋友的賀年禮物嘍!!
整個 porting 過程中，花最多時間的是在研究樂多誌的使用方式，因為樂多的後台管理阿土伯真的不熟... :p


<span style="font-weight: bold; font-size: 16px;">* 功能簡介:</span>
以目前 <span style="font-weight: bold;">roodo_ext</span> 0.1.1 來說，它提供了大部份 Roodo Blog 所需的功能，且全部只要 3.3 KB，相當的短小精幹唷。<br/>
對於不需要所有功能的進階使用者，您可以選用進階安裝，只要 1.1KB。
<ul>
  <li>可以使用 <a href="http://ibenjamin.blogspot.com/2007/01/blog-post_07.html">Blogger Smiley</a> 介紹的表情符號功能。</li>
  <li><span style="color: rgb(255, 0, 0);">所有功能支援設定選項來控制是否開啟</span>。</li>
  <li>Sidebar 中的網頁元素 可以自定元素 "[-]折收/[+]展開" 功能。</li>
  <li style="color: rgb(204, 0, 0);">表情符號可外掛及設定。如: <b>:</b><b>)</b>  <b>:</b><b>D</b> </li>
  <li style="color: rgb(204, 0, 0);">Sidebar 網頁元素可以自動 NavIcon小圖示。</li>
  <li style="color: rgb(204, 0, 0);">加入了表情符號集 .js ，直接引用。</li>
</ul>

<span style="font-weight: bold; font-size: 16px;">* 運作方式:</span>
它是利用 "文件載入完成(document ready)"後，再重新為您的網誌加上新功能，可以想成 "重新為您的網誌排" 。
它是針對 Roodo Blog的內建功能加以擴充，讓您不懂 HTML 亦能輕鬆使用來豐富您的 Blog。

##CONTINUE##
<span style="font-weight: bold; font-size: 16px;">* 如何使用(手動快速安裝 all-in-one 8KB):</span>
<ul>
    <li>先進入管理者後台 http://adm.blog.roodo.com/ </li>
    <ul>
        <li>Blog 管理 - Blog 基本設定</li>
        <li>在 說明: 中填入&nbsp;<pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://blogger-ext2.googlecode.com/files/roodo_ext-0.1.1.pack.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script type='text/javascript'&gt;
// 設定下一行開始
&lt;/script&gt;
</code></pre></li>
        <li>OK!</li>
    </ul>
</ul>
PS. 在這裡試最久，因為 sidebar 在樂多觀看文章時，會消失。只有說明中的語法會在每一頁面中出現。
最後在 <a href="http://blog.roodo.com/rocksaying/archives/2639381.html">石頭閒語</a> 找到答案~~~


<span style="font-weight: bold; font-size: 16px;">* 進階安裝:</span>
由於 <span style="font-weight: bold;">roodo_ext</span> 全面採用 plugins 的方式來擴充。
所以，如果您不會用到所有的功能或您熟悉網頁語法及設計，您可以使用進階安裝的方式來使用，讓 <span style="font-weight: bold;">roodo_ext</span>更具彈性。
整個 <span style="font-weight: bold;">roodo_ext</span>核心只要 &nbsp;1.1KB，滿足對大小及速度及客製化十分講究的玩家。
同手動快速安裝，一樣是將語法放在 "Blog 基本設定-說明" 中，同上，不再重覆，僅說明 Script 語法上的差異。
<pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://blogger-ext2.googlecode.com/files/roodo_ext-core-0.1.1.pack.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre>
其後再引入您所需要的功能 plugins ，如您需要 "表情符號功能" 則在上述二行後再加入一行:
<pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/roodo_plugin_replace_smiley.pack.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre>

<span style="font-weight: bold; font-size: 16px;">* 隱藏 Widget</span>
<ul>
    <li>內建功能，不需安裝。讓您可以加入任何的 Html 自訂元素 來擴充你的 Blog, 只要 Title 是 ##HIDEME## 則會自動隱藏。</li>
    <li>功能設定:<pre><code class="javascript">
// true = 隱藏 false = 不隱藏
BloggerExtOptions.hide_sidebar_html_markup = true;
</code></pre></li>
</ul>

<span style="font-weight: bold; font-size: 16px;">* 表情符號 plugin:</span>
直接在您的文章中打入表情符號之代碼，如同您在 IRC / MSN / AOL / Yahoo 等 IM 使用的代碼，本 plugin 會自動為您代換成圖片。
詳細說明，請參考<a href="http://ibenjamin.blogspot.com/2007/01/blog-post_07.html">部落格會笑了！Blogger Smiley！</a> 一文。
<ul>
    <li>All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入: (1.7KB) <pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/roodo_plugin_replace_smiley.pack.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre></li>
    <li>功能設定:<pre><code class="javascript">
// 表情符號功能開關
// true = 開 false = 關
BloggerExtOptions.replace_smiley = true;
// 自定的表情符號集，或請參考下面範例置換
// BloggerExtOptions.smilies = [];
</code></pre></li>
</ul>
當然，您可以自已加入您或設定您專屬的表情符號(0.5b 設定功能)
idben's表情符號集設定範例: (10)
<pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/emotionset_benjamin.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre>
Yahoo Messenger 動態表情符號集(default): (54)
<pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/emotionset_yahoo.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre>
MSN 動態表情符號集(0.6.1b GeniusKiKi提供): (60)
<pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/emotionset_msn.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre>


<span style="font-weight: bold; font-size: 16px;">* Sidebar 側邊網頁元素 折收/展功 功能:</span>
側邊中的網頁元素，越加越多，整個側邊條長長長&hellip; 也來給他自動 收納 一下吧。
你只要在後台點選 "設定插入欄位"，然後把 "標題" 填入設定中，這些 "插入欄位" 就自動收納啦!!!
<ul>
    <li>All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入:(1.2KB)<pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/roodo_plugin_sidebar_widget_expandable.pack.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre></li>
    <li>功能設定:<pre><code class="javascript">
//側邊功能 // true = 開 false = 關
BloggerExtOptions.sidebar_widget_expandable = true;
// 動態展開時，是否使用動畫效果
BloggerExtOptions.sidebar_widget_expandable_animate= false;
// 測邊展開的 html 語法，可以是圖 img 或任何 html 語法
BloggerExtOptions.sidebar_widget_expan_title = '[+]';
// 使用圖形而非文字範例
// BloggerExtOptions.sidebar_widget_expan_title='&lt;img border="0" src="你的圖片位址" align="left"/&gt;';
// 測邊關閉的 html 語法，可以是圖 img 或任何 html 語法
BloggerExtOptions.sidebar_widget_collapse_title = '[-]';
// 使用圖形而非文字範例
// BloggerExtOptions.sidebar_widget_collapse_title='&lt;img border="0" src="你的圖片位址" align="left"/&gt;';
// 要收納的元件 id
BloggerExtOptions.sidebar_widget_expandable_ids = ['最新的記事','每月記事','最新的回應'];
</code></pre></li>
</ul>

<span style="font-weight: bold; font-size: 16px;">* Sidebar 側邊網頁元素 Icon 圖示功能:</span>
側邊中的網頁元素，只能顯示文字，覺得太單調了嗎，給它加個 Icon 圖示吧。
你只要在後台點選 "設定插入欄位"，然後把 "標題" 填入設定中，這些 "插入欄位"，再為它設個 Icon 圖示就 OK 啦!!!
<ul>
    <li>All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入:(595Bytes)<pre><code class="html">
&lt;script src='http://blogger-ext2.googlecode.com/files/roodo_plugin_sidebar_widget_icon.pack.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre></li>
    <li>功能設定:<pre><code class="javascript">
//側邊 Icon 功能 // true = 開 false = 關
BloggerExtOptions.sidebar_widget_icon = true;
// 要元件 id 所對映的 Icon
BloggerExtOptions.sidebar_widget_icons= {
  '最新的記事':'&lt;img src="http://blogger-ext2.googlecode.com/svn/trunk/resources/myicons/ftr_mf_obj.gif" align="left"/&gt;',
  '記事分類':'&lt;img src="http://blogger-ext2.googlecode.com/svn/trunk/resources/myicons/discovery.gif" align="left"/&gt;'
  };
</code></pre></li>
</ul>


<span style="font-weight: bold; font-size: 16px;">* 注意事項:</span>
若您有使用 <a href="http://blog.roodo.com/rocksaying/archives/2639381.html" style="font-weight: bold; font-size: 18px;">為部落格加上「加入xx分享書籤」的按鈕@石頭閒語</a> 的功能，石頭閒語已於 2007.2.11 更新了語法，就可以讓 roodo_ext 和它並存，不然 roodo_ext 的功能會被吃掉!!
或您可參考 <a href="http://blog.roodo.com/hiroshiken/archives/2683263.html" style="font-weight: bold; font-size: 18px;">知識：為樂多加入收藏按鈕</a> 的方式!!

<span style="font-weight: bold; font-size: 16px;">* Source Code:</span>
本專案是一個完全 open source 的專案，歡迎大家使用及修改開發。
<a href="http://blogger-ext2.googlecode.com/svn/trunk/">http://blogger-ext2.googlecode.com/svn/trunk/</a></span>
若您亦寫了 plugin ，請將您的 plugin link 給小弟，小弟把它加入我的說明中...

<span style="font-weight: bold; font-size: 16px;">* 開發 plugin :</span>
roodo_ext 是一個 plugin base 的開發環境，所有在下寫的擴充也都是以 plugin 方式掛入。
您可以很容易的一起設計 plugin , 請參考 <a href="http://racklin.blogspot.com/2007/02/diy-bloggerext-blogger.html">DIY 利用 blogger_ext 擴充 Blogger 功能!</a>

<span style="font-weight: bold; font-size: 16px;">* 其它功能:</span>
待續
&hellip;
歡迎大家引用及給小弟建議。
阿土伯的下一步，就是在不久的將來，又要 porting 到 xuite.net 和 yam 以及有名大站了，歹命的阿土伯，歹命的技術人。


<span style="font-weight: bold; font-size: 16px;">* DEMO:</span>
<a href="http://blog.roodo.com/racklin/">http://blog.roodo.com/racklin/</a>

<span style="font-weight: bold; font-size: 16px;">* Change Log: </span>
<ul>
    <li>0.1.1: 加入 sidebar widget  Icon 圖示功能。</li>
    <li>0.1.1: 表情符號可外掛及設定。</li>
    <li>0.1.1: 加入 sidebar widget 折收功能。</li>
    <li>0.1.1: 加入 表情符號功能。</li>
</ul>
